<template>
    商品页
    <!-- 导航区 -->
    <ul>
        <!-- <li v-for="product in products">
            <RouterLink :to="{
                path: '/product/detail',
                query:{
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</RouterLink>
        </li> -->
        <li v-for="product in products">
            <RouterLink :to="{
                name: 'xq',
                params:{
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</RouterLink>
        </li>
    </ul>
    <hr>
    <!-- 展示区 -->
     <div class="detail">
        <RouterView></RouterView>
     </div>
</template>
<script setup>
import { reactive } from 'vue';

const products = reactive([{
    id: 1,
    name: '格力云锦三代空调',
    price: 6598.0
}, {
    id: 2,
    name: '奥普浴霸',
    price: 969.0
}, {

    id: 3,
    name: 'Ergonor保友金豪人体工学椅',
    price: 3088.0
}, {
    id: 4,
    name: '小米电视100英寸巨幕',
    price: 8999.0
}])
</script>